<div class="recipe-container">
    <article class="recipe-article">
        <div class="recipe-content">
            <c2c-loading *ngIf="!(recipe | async)"></c2c-loading>
            <section>
                <h1 class="title">{{(recipe | async)?.title}}</h1>
                <time [attr.aria-label]="'article published on ' + ((recipe | async)?.stamp | amDateFormat:'MMMM D, YYYY')" class="date">{{(recipe | async)?.stamp | amDateFormat:'MMMM D, YYYY'}}</time>
                <div *ngIf="(recipe | async)?.author" class="author">Author: {{(recipe | async)?.author}}</div>
                <div class="blurb">{{(recipe | async)?.blurb}}</div>
                <c2c-labels [labels]="(recipe | async)?.labels" label="Allergy free items for this recipe"></c2c-labels>
                <c2c-image-cover [src]="(recipe | async)?.image" [alt]="(recipe | async)?.title"></c2c-image-cover>
            </section>
            <section *ngIf="(recipe | async)?.text" class="recipe-text">{{(recipe | async)?.text}}</section>
            <section *ngFor="let item of (recipe | async)?.items; let itemIndex = index" class="recipe-item">
                <h2 class="item-title" *ngIf="item.name">{{item.name}}</h2>
                <section *ngIf="item.ingredients" class="ingredients">
                    <h3>Ingredients</h3>
                    <div [innerHTML]="item.ingredients"></div>
                </section>
                <section *ngIf="item.stepsObj" class="steps">
                    <h3>Steps</h3>
                    <ul aria-label="recipe steps">
                        <li *ngFor="let listItem of item.stepsObj; let listIndex = index">
                            <ng-template ngFor let-step [ngForOf]="listItem"><span *ngIf="step.type === 'string'" [innerHTML]="step.data"></span>
                                <c2c-recipe-timer-button *ngIf="step.type === 'timerObj'" [id]="itemIndex + '-' + listIndex" [title]="(recipe | async)?.title"
                                    [slug]="(recipe | async)?.slug" [timerObj]="step.data"></c2c-recipe-timer-button>
                            </ng-template>
                        </li>
                    </ul>
                </section>
            </section>
            <section *ngIf="(recipe | async)?.conclusion" class="conclusion">{{(recipe | async)?.conclusion}}</section>
        </div>
    </article>
</div>